<template>
  <div class="monitor-box">
    <div class="left-box">
      <div class="control-box">
        <div class="search-box box-shadow">
          <a-form>
            <a-form-item label="标段">
              <a-select
                  v-model:value="cellQueryFormState.sections[0].sectionId">
                <a-select-option
                    v-for="section in sections"
                    :key="section.sectionId" :value="section.sectionId">
                  {{section.sectionName}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="仅显示当日施工单元">
              <a-switch
                  :defaultChecked="cellQueryFormState.workToday==1"
                  @change="()=>{cellQueryFormState.workToday=cellQueryFormState.workToday==1?undefined:1}"/>
            </a-form-item>
            <a-form-item label="单元状态">
              <a-select
                  v-model:value="cellQueryFormState.status">
                <a-select-option
                    v-for="cellStatus in cellStatusDict.dict2"
                    :key="cellStatus.statusCode" :value="cellStatus.statusCode">
                  {{cellStatus.statusName}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="审批状态">
              <a-select
                  v-model:value="cellQueryFormState.checkStatus">
                <a-select-option
                    v-for="item in auditDict.dict"
                    :key="item.key" :value="item.key">
                  {{ auditDict.getValueByKey(item.key) }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="单元名称">
              <a-input v-model:value="cellQueryFormState.cellName"></a-input>
            </a-form-item>
            <a-form-item>
              <a-button @click="getCellBaseInfoList" type="primary">查询</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="cell-table-box box-shadow">
        <div class="table-box-header">
          单元列表
        </div>
        <div class="table-box-center">
          <a-table
              :scroll="{y:setHeight('.table-box-center', 125) + 'px'}"
              :data-source="cellBaseInfoList.cellInfo"
              :rowKey="(record) => record.cellId"
              @change="getCellBaseInfoList"
              :pagination="{
                'current':cellBaseInfoList.startPage,
                'total':cellBaseInfoList.totalCount,
                'pageSize':cellBaseInfoList.everyPage,
                'showLessItems':true
              }">
            <a-table-column title="归属标段" data-index="sectionName"/>
            <a-table-column title="单元名称" data-index="cellName"/>
            <a-table-column title="工艺类型" data-index="kind" width="60px">
              <template #default="{text}">
                {{ kindDict.getNameByCode(text) }}
              </template>
            </a-table-column>
            <a-table-column title="状态" data-index="checkStatus" width="60px">
              <template #default="{text}">
                <div :style="{color: auditDict.getColorByKey(text),border: '1px solid',borderRadius: '3px'}">
                  {{ auditDict.getValueByKey(text) }}
                </div>
              </template>
            </a-table-column>
            <a-table-column title="操作" data-index="cellId" width="50px">
              <template #default="{text,record}">
                <div class="icon-box">
                  <div @click="handleCell(record)">
                    <EditOutlined/>
                  </div>
                </div>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="base-info-box box-shadow">
        <a-descriptions :column="4">
          <a-descriptions-item label="单元名称" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.cellName:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.gtmCreateTime:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="工艺类型" :span="1">
            {{inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="归属标段" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.sectionName:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="区域面积" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.area:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="创建账号" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.userName:'--'}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="report-box box-shadow">
        <div class="report-title">
          数据报表
          <div class="audit-box">
            <a-button @click="()=>{auditSetInfo.auditPut.showModal = true}" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,0)" type="primary">提交审核</a-button>
            <a-button @click="()=>{auditSetInfo.auditPermit.showModal = true}" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,1)" type="primary">审核通过</a-button>
            <a-button @click="()=>{auditSetInfo.auditReject.showModal = true}" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,1)" type="primary">审核驳回</a-button>
            <a-button @click="getAuditLog(inCellBaseInfo.cellId)" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,2)" type="primary">记录查看</a-button>
          </div>
        </div>
        <div class="report-search-box">
          <span>报表类型</span>
          <a-select v-model:value="reportSel">
            <a-select-option :key="1" :value="1">位置图形报告</a-select-option>
            <a-select-option :key="2" :value="2">深度图形报告</a-select-option>
            <a-select-option :key="101" :value="101">验收报告</a-select-option>
            <a-select-option :key="201" :value="201">深度报警详情</a-select-option>
            <a-select-option :key="202" :value="202">倾斜度报警详情</a-select-option>
          </a-select>
          <a-button @click="getReport(inCellBaseInfo.cellId,reportSel)"  :disabled="!inCellBaseInfo" type="primary">查询</a-button>
        </div>
        <div class="report-center">
          <div v-if="reportType < 100" class="img-container">
            <a-image
                v-if="reportImg"
                width="940px"
                height="530px"
                :src="reportImg"/>
          </div>
          <div v-if="reportType > 100 && reportType < 200" id="receiving-report" class="receiving-report">
            <div class="title"><a-image class="logo" :width="16" :height="16" :src="logo"/><span>验收报告</span></div>
            <a-descriptions :column="4" bordered>
              <a-descriptions-item label="工程名称" :span="4">{{ receivingReport.projectName }}</a-descriptions-item>
              <a-descriptions-item label="施工单位名称" :span="2">{{ receivingReport.buildName }}</a-descriptions-item>
              <a-descriptions-item label="监理单位名称" :span="2">{{ receivingReport.supervisorName }}</a-descriptions-item>
              <a-descriptions-item label="施工单元名称" :span="2">{{ receivingReport.cellName }}</a-descriptions-item>
              <a-descriptions-item label="单元面积" :span="2">{{ receivingReport.area.toFixed(2) }}</a-descriptions-item>
              <a-descriptions-item label="施工开始时间" :span="2">{{ receivingReport.startTime }}</a-descriptions-item>
              <a-descriptions-item label="施工结束时间" :span="2">{{ receivingReport.endTime }}</a-descriptions-item>
              <a-descriptions-item label="设计信息" :span="2">
                设计总根数：{{ receivingReport.totleCountDesign.toFixed(2) }}
                <br/>
                钻孔设计深度：{{ receivingReport.depthDesign.toFixed(2) }}
              </a-descriptions-item>
              <a-descriptions-item label="实际信息" :span="2">
                钻孔总根数：{{ receivingReport.totleCount.toFixed(2) }}
                <br/>
                钻孔总深度：{{ receivingReport.totleDepth.toFixed(2) }}
                <br/>
                钻孔平均深度：{{ receivingReport.avgDepth.toFixed(2) }}
                <br/>
                深度符合设计比例：{{ parseFloat(receivingReport.ratioDepth).toFixed(2) }}%
                <br/>
                钻孔平均倾斜度：{{ receivingReport.avgGradient.toFixed(2) }}
                <br/>
                倾斜度符合设计比例：{{ parseFloat(receivingReport.ratioGradient).toFixed(2) }}%
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div v-if="reportType > 200" class="table-container">
            <a-table
                v-if="reportType==201"
                :scroll="{y:setHeight('.table-container', 125) + 'px'}"
                :data-source="reportWarn.info"
                :rowKey="(record,index)=>{return index}"
                @change="getWarnInfo"
                :pagination="{
                  'current':reportWarn.startPage,
                  'total':reportWarn.totalCount,
                  'pageSize':reportWarn.everyPage,
                  'showLessItems':true}">
              <a-table-column title="时间" data-index="gtmTime"/>
              <a-table-column title="机械名称" data-index="deviceName"/>
              <a-table-column title="设计深度(m)" data-index="deviceName">
                <template #default="{text}">
                  {{ reportWarn.design.toFixed(2) }}
                </template>
              </a-table-column>
              <a-table-column title="施工深度(m)" data-index="build">
                <template #default="{text}">
                  {{ text.toFixed(2) }}
                </template>
              </a-table-column>
            </a-table>
            <a-table
                v-if="reportType==202"
                :scroll="{y:setHeight('.table-container', 125) + 'px'}"
                :data-source="reportWarn.info"
                :rowKey="(record,index)=>{return index}"
                @change="getWarnInfo"
                :pagination="{
                  'current':reportWarn.startPage,
                  'total':reportWarn.totalCount,
                  'pageSize':reportWarn.everyPage,
                  'showLessItems':true}">
              <a-table-column title="时间" data-index="gtmTime"/>
              <a-table-column title="机械名称" data-index="deviceName"/>
              <a-table-column title="设计倾斜度" data-index="deviceName">
                <template #default="{text}">
                  {{ reportWarn.design.toFixed(2) }}
                </template>
              </a-table-column>
              <a-table-column title="施工倾斜度" data-index="build">
                <template #default="{text}">
                  {{ text.toFixed(2) }}
                </template>
              </a-table-column>
            </a-table>
          </div>
        </div>
        <div v-if="reportType < 200" class="report-footer">
          <a-button @click="createTiledMap(inCellBaseInfo.cellId)" :disabled="!inCellBaseInfo">重新生成</a-button>
          <a-button @click="exportReport" :disabled="!inCellBaseInfo" type="primary">导出</a-button>
        </div>
      </div>
    </div>
  </div>
  <SModal
      title="提交审核"
      :width="450"
      :height="465"
      :is-show="auditSetInfo.auditPut.showModal"
      @closed="()=>{auditSetInfo.auditPut.showModal = false}">
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br/>
          2.审核阶段和审核通过后将无法修改施工单元参数；<br/>
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form
            :labelCol="{style: 'width: 80px'}">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo?inCellBaseInfo.sectionName:"" }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo?inCellBaseInfo.cellName:"" }}
          </a-form-item>
          <a-form-item label="工艺">
            {{ inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):"" }}
          </a-form-item>
          <a-form-item label="状态">
            {{ inCellBaseInfo?auditDict.getValueByKey(inCellBaseInfo.checkStatus):"" }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{span:18}">
            <a-textarea
                v-model:value="auditSetInfo.auditPut.submitInfo.remark"
                :auto-size="{minRows: 2, maxRows: 5}"/>
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button @click="commitCheck(inCellBaseInfo?.cellId,auditSetInfo.auditPut.submitInfo.remark)" type="primary">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
      title="审核通过"
      :width="450"
      :height="465"
      :is-show="auditSetInfo.auditPermit.showModal"
      @closed="()=>{auditSetInfo.auditPermit.showModal = false}">
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br/>
          2.审核阶段和审核通过后将无法修改施工单元参数；<br/>
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form
            :labelCol="{style: 'width: 80px'}">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo?inCellBaseInfo.sectionName:"" }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo?inCellBaseInfo.cellName:"" }}
          </a-form-item>
          <a-form-item label="工艺">
            {{ inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):"" }}
          </a-form-item>
          <a-form-item label="状态">
            {{ inCellBaseInfo?auditDict.getValueByKey(inCellBaseInfo.checkStatus):"" }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{span:18}">
            <a-textarea
                v-model:value="auditSetInfo.auditPermit.submitInfo.remark"
                :auto-size="{minRows: 2, maxRows: 5}"/>
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button @click="commitPermit(inCellBaseInfo?.cellId,auditSetInfo.auditPermit.submitInfo.remark)" type="primary">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
      title="审核驳回"
      :width="450"
      :height="465"
      :is-show="auditSetInfo.auditReject.showModal"
      @closed="()=>{auditSetInfo.auditReject.showModal = false}">
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br/>
          2.审核阶段和审核通过后将无法修改施工单元参数；<br/>
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form
            :labelCol="{style: 'width: 80px'}">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo?inCellBaseInfo.sectionName:"" }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo?inCellBaseInfo.cellName:"" }}
          </a-form-item>
          <a-form-item label="工艺">
            {{ inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):"" }}
          </a-form-item>
          <a-form-item label="状态">
            {{ inCellBaseInfo?auditDict.getValueByKey(inCellBaseInfo.checkStatus):"" }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{span:18}">
            <a-textarea
                v-model:value="auditSetInfo.auditReject.submitInfo.remark"
                :auto-size="{ minRows: 2, maxRows: 5 }"/>
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button @click="commitReject(inCellBaseInfo?.cellId,auditSetInfo.auditReject.submitInfo.remark)" type="primary">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
      title="审核记录"
      width="460"
      :is-show="auditSetInfo.auditLogModal"
      @closed="()=>{auditSetInfo.auditLogModal = false}">
    <div class="log-box">
      <a-table
          :scroll="{y:`300px`}"
          :data-source="auditSetInfo.auditList"
          :rowKey="(record) => record.gtmCreate"
          :pagination="false">
        <a-table-column title="操作" data-index="kind"/>
        <a-table-column title="时间" data-index="gtmCreate"/>
        <a-table-column title="账号" data-index="userName"/>
        <a-table-column title="备注" data-index="content"/>
      </a-table>
    </div>
  </SModal>
</template>

<script lang="ts">
import {useStore} from "vuex"
import {defineComponent, reactive, ref, toRefs, onMounted, computed} from "vue"
import {setHeight} from "@/utils/tableUtils"
import {cellBaseInfo} from "@/hooks/cell/index"
import kindDict from "@/dicts/kindDict"
import cellStatusDict from "@/dicts/cellStatusDict"
import auditDict from "@/dicts/auditDict"
import {EditOutlined} from '@ant-design/icons-vue'
import axios from '@/utils/axios'
import qs from 'qs'
import {message} from "ant-design-vue"
import {Base64ToPng} from "@/utils/tyutils/index"
import {Html2Pdf,Throttle} from "@/utils/tyutils/index"
import logo from "@/assets/image/logosd2.png"
import SModal from "@/components/SModal/index.vue"

interface AuditInfo{
  showModal:false
  submitInfo: {
    cellId: number|null
    remark: string|null
  }
}

export default defineComponent({
  setup(){
    const store = useStore()
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])))
    const {
      cellQueryFormRef,cellQueryFormState,cellBaseInfoList,inCellBaseInfo,
      getCellBaseInfoList,setCellStatus,getCellBaseInfo
    } = cellBaseInfo()
    const reportInfo = reactive({
      reportSel: 1,
      reportType: 1,
      reportImg: <any>null,
      receivingReport: <any>null,
      reportWarn: {
        startPage: 1,
        everyPage: 10,
        info: new Array()
      }
    })

    const auditSetInfo = reactive({
      auditPut:<AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditPermit:<AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditReject:<AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditLogModal: false,
      auditList: new Array()
    })

    // 获取报告
    const getReport = (cellId:number, workType:number)=>{
      reportInfo.reportImg = null;
      reportInfo.receivingReport = null;
      reportInfo.reportWarn = {
        startPage: 1,
        everyPage: 10,
        info: new Array()
      };
      reportInfo.reportType = workType;
      switch (workType) {
        case 101:
          axios.post("/rotary/findAnalysisReport",{cellId:cellId}).then((res:any)=>{
            if(res.success){
              reportInfo.receivingReport = res.data
            }else{
              message.info(res.msg)
            }
          })
          break;
        case 201:
        case 202:
          getWarnInfo(null);
          break;
        default:
          axios.post("/xwzMap/reporter",qs.stringify({cellID:cellId,workType}),{
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            responseType:"arraybuffer"
          }).then((res:any)=>{
            reportInfo.reportImg = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          }).catch((err:any)=>{
            message.info("暂未施工")
          })
      }
    }

    /**
     * 获取报警信息
     */
    const getWarnInfo = (pageInfo:any)=>{
      let kind = 0;
      if(reportInfo.reportType == 202) kind = 1;
      axios.post("/rotary/findWarnDetail",{
        cellId: inCellBaseInfo.value.cellId,
        kind: kind,
        startPage: pageInfo ? pageInfo.current : reportInfo.reportWarn.startPage,
        everyPage: reportInfo.reportWarn.everyPage
      }).then((res:any)=>{
        if(res.success){
          reportInfo.reportWarn = res.data;
        }else{
          message.info(res.msg);
        }
      })
    }

    // 导出报告
    const exportReport = ()=>{
      switch (reportInfo.reportType) {
        case 1:
          if(!reportInfo.reportImg){
            message.info("暂未施工")
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 2:
          if(!reportInfo.reportImg){
            message.info("暂未施工")
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 11:
          if(!reportInfo.reportImg){
            message.info("暂未施工")
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 101:
          Html2Pdf("receiving-report",inCellBaseInfo.value.sectionName)
          break
        default:
          break
      }
    }

    // 选择单元
    const handleCell = (cell:any)=>{
      getCellBaseInfo(cell)
    }

    // 后端绘制报告
    const createTiledMap = Throttle((cellId:number)=>{
      axios.post("/xwzMap/reCreatReport",
          qs.stringify({
            cellID:cellId,
            workType:reportInfo.reportType,
          }),{
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).then((res:any)=>{
        if(res.success){
          getReport(inCellBaseInfo.value.cellId,reportInfo.reportType)
          message.info("重新生成成功")
        }else{
          message.info("重新生成失败")
        }
      })
    },5)

    // 提交审核
    const commitCheck = (cellId:number,content:string)=>{
      axios.post("/common/commitCheck",{
        cellId: cellId,
        content: content
      }).then((res:any)=>{
        if(res.success){
          let cell = cellBaseInfoList.value.cellInfo.find((item:any)=>{
            return item.cellId === cellId
          })
          if(cell){
            cell.checkStatus = 1
          }
          message.info("提交成功")
          auditSetInfo.auditPut.showModal = false
        }else{
          message.info(res.msg)
        }
      })
    }

    // 通过审核
    const commitPermit = (cellId:number,content:string)=>{
      axios.post("/common/passCheck",{
        cellId: cellId,
        content: content
      }).then((res:any)=>{
        if(res.success){
          let cell = cellBaseInfoList.value.cellInfo.find((item:any)=>{
            return item.cellId === cellId
          })
          if(cell){
            cell.checkStatus = 3
          }
          message.info("提交成功")
          auditSetInfo.auditPermit.showModal = false
        }else{
          message.info(res.msg)
        }
      })
    }

    // 驳回审核
    const commitReject = (cellId:number,content:string)=>{
      axios.post("/common/dismissCheck",{
        cellId: cellId,
        content: content
      }).then((res:any)=>{
        if(res.success){
          let cell = cellBaseInfoList.value.cellInfo.find((item:any)=>{
            return item.cellId === cellId
          })
          if(cell){
            cell.checkStatus = 2
          }
          message.info("提交成功")
          auditSetInfo.auditReject.showModal = false
        }else{
          message.info(res.msg)
        }
      })
    }

    // 获取审核记录
    const getAuditLog = (cellId:number)=> {
      axios.post("/common/findCheck",{
        cellId: cellId,
      }).then((res:any)=>{
        if(res.success){
          auditSetInfo.auditList = res.data
          auditSetInfo.auditLogModal = true
        }else{
          message.info(res.msg)
        }
      })
    }

    onMounted(()=>{
      if(sections.value.length>0){
        cellQueryFormState.value.sections[0].sectionId = sections.value[0].sectionId
        cellQueryFormState.value.sections[0].kind = [15]
        getCellBaseInfoList(null)
      }
    })

    return{
      setHeight,
      logo,
      sections,
      kindDict,
      cellStatusDict,
      ...toRefs(reportInfo),
      handleCell,
      getReport,
      exportReport,
      createTiledMap,
      cellQueryFormRef,cellQueryFormState,cellBaseInfoList,inCellBaseInfo,
      getCellBaseInfoList,setCellStatus,getCellBaseInfo,

      auditDict,
      auditSetInfo,
      commitCheck,
      commitPermit,
      commitReject,
      getAuditLog,

      getWarnInfo
    }
  },
  components: {EditOutlined,SModal}
})
</script>

<style lang="scss" scoped>
.monitor-box{
  display: flex;
  width: 100%;
  height: 100%;
  .left-box{
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 100%;
    .control-box{
      display: flex;
      width: 100%;
      height: 312px;
      .search-box{
        width: 360px;
        height: 100%;
        padding: 12px 17px;
        box-sizing: border-box;
        ::v-deep label{
          color:#666666;
        }
        ::v-deep .ant-form-item{
          display: flex;
          margin-bottom: 10px;
        }
        ::v-deep .ant-form-item-control-wrapper{
          flex: 1;
        }
        ::v-deep .ant-select{
          width: 100%;
        }
      }
    }
    .cell-table-box{
      display: flex;
      flex-direction: column;
      width: 360px;
      flex: 1;
      margin-top: 20px;
      padding: 0 13px;
      .table-box-header{
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        padding: 18px 0 10px 10px;
      }
      .table-box-center{
        width: 100%;
        flex: 1;
      }
    }
  }
  .right-box{
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    margin-left: 20px;
    .base-info-box{
      width: 100%;
      height: 82px;
      padding: 14px 0 2px;
    }
    .report-box{
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      margin-top: 20px;
      .report-title{
        display: flex;
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        padding: 18px 0 10px 34px;
        border-bottom: 1px solid #EDF0FB;
        .audit-box{
          flex: 1;
          display: flex;
          padding: 0 34px;
          justify-content: flex-end;
          ::v-deep >button{
            margin-left: 20px;
          }
        }
      }
      .report-search-box{
        padding: 18px 34px;
        >span{
          color: #666666;
          font-size: 14px;
          font-weight: bold;
          line-height: 32px;
          font-family: 'PingFangSC-Medium, PingFang SC';
        }
        ::v-deep .ant-select{
          width: 240px;
          margin: 0 8px;
        }
        ::v-deep >button{
          margin-left: 80px;
        }
      }
      .report-center{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex: 1;
        .img-container{
          width: 940px;
          height: 530px;
        }
        .receiving-report{
          width: 100%;
          height: 100%;
          padding: 14px 34px;
          box-sizing: border-box;
          .title{
            display: flex;
            justify-content: center;
            align-content: center;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 8px;
            line-height: 25px;
            text-align: center;
          }
          ::v-deep .ant-image{
            margin-top: -1.5px;
            margin-left: -4px;
            margin-right: 4px;
          }
          ::v-deep .ant-descriptions-title{
            text-align: center;
          }
        }
        .table-container{
          width: 1100px;
          height: 530px;
        }
      }
      .report-footer{
        display: flex;
        justify-content: flex-end;
        padding: 16px 34px;
        height: 64px;
        ::v-deep button{
          margin-left: 8px;
        }
      }
    }
  }
}
.audit-set-box{
  position: absolute;
  width: 100%;
  height: 376px;
  left: 0;
  ::v-deep .ant-alert-with-description{
    padding: 8px;
  }
  .audit-set-form-box{
    width: 100%;
    padding: 8px 24px;
    ::v-deep .ant-form{
      color: #666666;
    }
    ::v-deep .ant-form-item{
      margin-bottom: 0;
    }
    .audit-set-btn-bar{
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }
  }
}
</style>
